<template>
  <el-table
    :header-cell-style="{
      height: '54px',
      padding: '0',
      background: '#f5f9ff',
      'font-size': '14px',
      color: '#333',
    }"
    :row-style="{
      'font-size': '14px',
      color: '#333',
      'font-weight': 400,
    }"
    stripe
    border
    size="small"
    v-bind="$attrs"
    :data="props.tableData"
  >
    <template v-for="(item, index) in props.columns" :key="index">
      <el-table-column align="center" show-overflow-tooltip v-bind="item">
        <template v-if="item.label === '操作'" #default="scope">
          <slot name="default" :row="scope.row" />
        </template>
      </el-table-column>
    </template>
    <template #empty>
      <el-image :src="empty" fit="fill"></el-image>
      <!-- <el-empty :image-size="200" :image="empty">
        <el-button type="primary">Button</el-button>
      </el-empty> -->
    </template>
  </el-table>
</template>

<script setup lang="ts">
import empty from '@/assets/images/empty.png'
type TableData = {
  [key: string]: any
}
type Columns<T, K extends keyof T> = {
  // label: string | number
  // value: string | number
  // [key: string]: any
  [P in K]: T[P]
}
interface IProps {
  tableData: TableData[]
  // columns: columns[]
  columns: any
  [key: string]: any
}

const props = withDefaults(defineProps<IProps>(), {
  // tableData: [],
  // columns: [],
})

</script>

<style scoped></style>
